<template>
  <div class="com-floor-contant padding-top-10">
    <div class="flex justify-between">
      <div class="floorLeft">
        <div class="titleBox flex align-center justify-between">
          <div>
            <div class="flex align-end">
              <div class="base-font-30 text-orange enLange text-bold">3</div>
              <div class="base-font-30 text-orange enLange text-bold">F</div>
              <div class="base-font-20">{{title}}</div>
            </div>
          </div>
          <div>
            <div class="newsMenu flex align-center ">
              <div class="newsMenuItem" @click="lxHotMenu(index)" :class="threeMenuIndex===index?'checked':''"
                v-for="(item,index) in threeMenuList" :key="index" v-if="index<4">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="kszqList">
          <div class="kszqListItem padding-tb-20 flex align-center" v-for="(item,index) in threeFloorList" :key="index" @click="goDetail(item.id)">
            <div class="newsImg">
              <el-image :src="item.image" fit="cover"></el-image>
            </div>
            <div class="kszqListNewInfo">
              <div>
                <div class="text-333 base-font-16">{{item.title}}</div>
                <div class="ellipsis2 text-999 margin-top-7 base-font-14">
                 {{item.description}}</div>
                <div class="flex align-center newsLabel text-999 base-font-14 margin-top-10">
                  <span>[{{item.labelName}}]</span>
                  <i class="el-icon-view margin-left-10"></i>
                  <span class="margin-left-5">{{item.browseNum || 0}}</span>
                  <i class="el-icon-time margin-left-10"></i>
                  <span>{{item.createTimeStr}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>




      </div>
      <div class="floorRight">
        <div class="rightListItem" v-for="(item,index) in threeMenuList" :key="index" v-if="index>3">
          <div class="title flex align-center justify-between">
            <div class="base-font-16">
              <div class="line">{{item.name}}</div>
            </div>
            <div class="base-font-12 text-999">更多></div>
          </div>
          <div v-for="(iitem,iindex) in item.list" :key="iindex">
            <div class="flex align-center margin-top-15 pointer" v-if="iindex===0" @click="goDetail(iitem.id)">
              <div class="rightImg"> <el-image :src="iitem.image" fit="cover"></el-image></div>
              <div class="newsInfo base-font-14">
                <div class="ellipsis2 text-666">{{iitem.title}}</div>
                <div class="ellipsis2 text-999 margin-top-5">{{iitem.description}}</div>
              </div>
            </div>
            <div class="margin-top-5" v-else>
              <div class="base-news-line base-font-14 ellipsis1 text-666 pointer"  @click="goDetail(iitem.id)">{{iitem.title}}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import banner from "@/static/image/lx/banner.jpg"
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    props: {
      floorNum: {
        type: String,
        default: "1"
      },
      title: {
        type: String,
        default: ""
      }
    },
    computed: {
      ...mapState({
        menuListData: (state) => state.webData.menuListData,
      }),
    },
    data() {
      return {
        banner,
        threeMenuList: [ ],
        threeMenuIndex: 0,
        threeFloorList:[],
        threeFloorRightList:[],
        threeFloorRightOne:[],
        threeFloorRightTwo:[],
        threeFloorRightThree:[],
        count:0

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.threeMenuList=[]
        if (this.menuListData && this.menuListData.length > 0) {
          this.menuListData.forEach((item, index) => {
            if (item.name === this.title) {
             this.threeMenuList = item.list
             this.getList()
            }
          })
        }
        if( this.threeMenuList.length>4){
          this.$selectArticlePage({
            pageSize: 6,
            pageNum: 1,
            labelName: this.threeMenuList[4].name,
          }).then((res) => {

            if (res.code === 0) {
               this.threeMenuList[4].list=res.data
            }
          })
        }
        if( this.threeMenuList.length>5){
          this.$selectArticlePage({
            pageSize: 6,
            pageNum: 1,
            labelName: this.threeMenuList[5].name,
          }).then((res) => {

            if (res.code === 0) {
               this.threeMenuList[5].list=res.data
            }
          })
        }
        if( this.threeMenuList.length>6){
          this.$selectArticlePage({
            pageSize: 6,
            pageNum: 1,
            labelName: this.threeMenuList[6].name,
          }).then((res) => {

            if (res.code === 0) {
               this.threeMenuList[6].list=res.data
            }
          })
        }






      })
    },
    methods: {
      lxHotMenu(index) {
        this.threeMenuIndex = index
        this.getList()
      },
      getList() {
        this.list = []
        this.$selectArticlePage({
          pageSize: 6,
          pageNum: 1,
          labelName: this.threeMenuList[this.threeMenuIndex].name,
        }).then((res) => {

          if (res.code === 0) {
            this.threeFloorList = res.data
          }

        })
      },

      goDetail(id) {
        this.$router.push({
          path: '/detail',
          query: {
            id: id,
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .floorLeft {
    width: 880px;
    height: auto;

    .titleBox {
      height: 46px;
      border-bottom: 1px solid #caccd4;
    }

    .newsMenu {
      height: 30px;
      color: #757575;
    }

    .newsMenuItem {
      height: 30px;
      line-height: 30px;
      border: 1px solid #f0f0f0;
      padding: 0 10px;
      background: #f6f6f6;
      cursor: pointer;

      &.checked {
        background: #ef9b76;
        color: #FFFFFF;
        border-color: #ef9b76;
      }
    }
  }

  .floorRight {
    width: 280px;
    height: auto;

    .rightListItem {
      .title {
        border-bottom: 1px solid #caccd4;
        height: 45px;
        line-height: 45px;

        .line {
          height: 44px;
          position: relative;

          &:before {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background: #757575;
            left: 0;
            bottom: -1px;
            position: absolute;
          }
        }
      }

      .rightImg {
        width: 120px;
        height: 80px;
        flex-shrink: 0;

        .el-image {
          width: 120px;
          height: 80px;
        }
      }

      .newsInfo {
        padding-left: 10px;
        box-sizing: border-box;
        flex-grow: 1;
        line-height: 1.4;
      }

      .base-news-line {
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        box-sizing: border-box;

        &:before {
          content: '';
          display: block;
          width: 4px;
          height: 4px;
          background: #ddd;
          position: absolute;
          left: 0;
          top: 13px;
        }
      }
    }
  }

  .menuMiniItem {
    margin-left: 15px;
    color: #959595
  }


  .hotNewsItem {
    height: 30px;
    line-height: 30px;

    .label {
      width: 3px;
      height: 3px;
      background: #ccc;
      flex-shrink: 0;
      margin-right: 7px;
    }

    .time {
      width: 50px;
      text-align: right;
      flex-shrink: 0;
    }
  }

  .kszqListItem {
    border-bottom: 1px solid #e9e9e9;cursor: pointer;

    .newsImg {
      width: 150px;
      height: 100px;
      flex-shrink: 0;
      border-radius: 5px;
      overflow: hidden;

      .el-image {
        width: 150px;
        height: 100px;
        transform: scale(1);
        -webkit-transform: scale(1);
        transition: transform 0.4s linear;
        -webkit-transition: transform 0.4s linear;
      }
    }
    &:hover{
      .el-image {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transition: transform 0.4s linear;
        -webkit-transition: transform 0.4s linear;
      }
    }

    .kszqListNewInfo {
      flex-grow: 1;
      padding-left: 15px;
      box-sizing: border-box;
      line-height: 1.4;
    }


  }
</style>
